<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
        <div id="app">
          <parent-component></parent-component>
        </div>
        <script>
          Vue.component('parentComponent', {
            name: 'parentComponent',
            template: `<div><p>
              <h2>{{content}}</h2>
              <child-component :mdata='content2' @update='handleUpdate'></child-component>
            </p></div>`,
            data() {
              return {
                content: '我是父组件',
                content2: '我是子组件2'
              }
            },
            methods: {
              handleUpdate(val) {
                this.content = val
              }
            }
          })
          Vue.component('childComponent', {
            name: 'childComponent',
            template: `<div><p>
              <h2>{{mdata}}</h2>
              <button @click="handleClick">按钮</button>
            </p></div>`,
            props: {
              mdata: String
            },
            methods: {
              handleClick() {
                this.$emit('update', '我要改父组件的content')
              }
            }
          })
      
          //根组件
          var app = new Vue({
            el: '#app',
          })
        </script>
      </body>
</html>